<template>
    <div id="My-Bottom-Question">
        <div id="My-Bottom-Content">
            <div id="My-Bottom-title">
                <img src="img/My/My-1-1.png" alt="">
                <h2>回答问题</h2>
                <span>更多问题&nbsp;&nbsp;&nbsp;&nbsp;＞</span>
            </div>
            <div id="My-Bottom-text">
                <div class="ti top">
                    <h2>高三数学很差，没时间，还要弄错题本吗?</h2>
                    <p>
                        <span class="tt">1416&nbsp;关注</span>
                        <span class="block"><i class="iconfont icon-hulue"></i>忽略</span>
                        <span class="block"><i class="iconfont icon-wolaihuida"></i>回答</span>
                    </p>
                </div>
                <div class="ti bottom"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "question"
    }
</script>

<style lang="scss" scoped>

    #My-Bottom-Question{
        background-color: #FFFFFF;
        margin-bottom: 0.08rem;

        #My-Bottom-Content{
            padding: 0.16rem 0.15rem 0.15rem 0.15rem;
        }
    }

    #My-Bottom-title{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;

         img{
             width: 0.2rem;
             vertical-align: middle;
         }

        h2{
            margin-left: 0.04rem;
            font-size: 0.14rem;
            color: #202020;
        }

        span{
            font-size: 0.12rem;
            color: #6e6e6e;
            position: absolute;
            right: 0.09rem;
        }
    }

    #My-Bottom-text{
        width: 3.3rem;
        height: 1.42rem;
        margin-top: 0.2rem;
        position: relative;

        .ti{
            border-radius: 0.08rem;
            border: 0.01rem solid #f1f1f1;
            border-bottom-width: 0.02rem;
            box-shadow: 0 0 0.01rem 0.02rem #f1f1f1;
        }

        .bottom,.top{
            width: 3.14rem;
            height: 1.33rem;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        .top{
            width: 3.3rem;
            left: 0;
            z-index: 3;
            top: 0;
            background-color: #FFFFFF;
            transform: translateY(0);

            h2{
                font-size: 0.17rem;
                color: #090909;
                padding-left: 0.12rem;
                padding-right: 0.268rem;
                padding-top: 0.2rem;
            }

            p{
                font-size: 0.14rem;
                padding-left: 0.12rem;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                position: absolute;
                bottom: 0.17rem;

                .tt{
                    color: #7f7f7f;
                }

                .block{
                    width: 0.75rem;
                    height: 0.28rem;
                    display: block;
                    border-radius: 0.04rem;
                    text-align: center;
                    line-height: 0.28rem;

                }

                span:nth-of-type(2){
                    background-color: #f7f7f7;
                    color: #7b7b7b;
                    margin-left: 0.75rem;

                    i{
                        font-size: 0.14rem;
                        color: #737373;
                    }
                }

                span:nth-of-type(3){
                    background-color: #ebf5ff;
                    color: #0060ea;
                    margin-left: 0.2rem;

                    i{
                        font-size: 0.14rem;
                        color: #006bf8;
                    }
                }
            }
        }
    }
</style>